<!-- @format -->

<template>
  <view class="snowCircle">
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="snowCircle-content" :style="[{ top: top + 'px' }]">
      <view class="masonry">
        <view
            class="item"
            v-for="item in circleDataList"
            :key="item.circleId"
            @tap="newDetail(item.circleId)">
          <view class="itemClass"
                :class="item.isShow === '0'? 'itemClass-saveDraft' :item.status === '1'? 'itemClass-unaudited' : ''"
                v-if="item.isShow === '0'|| item.status === '1'">
            <!-- 未审核-->
            <image v-if="item.status === '1'" class="itemClassIcon" mode="widthFix" src="../../../static/skiTubing/IsUnaudited.png"/>
            <text v-if="item.status === '1'" class="itemClassText">未审核</text>
            <!-- 存草稿-->
            <image v-if="item.isShow === '0'" class="itemClassIcon" mode="widthFix" src="../../../static/skiTubing/IsSaveDraft.png"/>
            <text v-if="item.isShow === '0'" class="itemClassText">草稿</text>
          </view>
          <image class="imgCover" mode="widthFix" :src="getImage(item.titleImg)"/>
          <view class="characters">
            <text>{{ item.title }}</text>
            <view class="isContent">
              <view class="flexContent">
                <image class="userImg" mode="scaleToFill" :src="item.avatar"/>
                <text class="userName">{{ item.userName }}</text>
              </view>
              <view class="flexContent">
                <image class="clickIcon" mode="scaleToFill" src="../../../static/skiTubing/snowList_clickIcon.png"/>
                <text class="userDate">{{ item.clickNum }}</text>
              </view>

            </view>
          </view>
          <view class="operation">
            <view class="operationIcon" @tap.stop="editSnowCircle(item.circleId)">
              <image class="edit_Icon" src="../../../static/skiTubing/edit.png" mode="widthFix"></image>
            </view>
            <view class="operationIcon" @tap.stop="deleteSnowCircle(item.circleId)">
              <image class="delete_Icon" src="../../../static/skiTubing/delete.png" mode="widthFix"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="addPlus" @tap="addNewCircleData">
        <image class="addPlusImg" src="../../../static/skiTubing/snowList_addPlus.png" mode="scaleToFill"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      /* 页面标题*/
      childTitle: '我的雪圈',
      /* 导航栏高度*/
      top: 150,
      /* 数据列表*/
      circleDataList:[],
      /* 当前登录人ID*/
      userId: null,
    }
  },
  onShow() {
    console.log("userId>>>",uni.getStorageSync('userId'));
    this.userId = uni.getStorageSync('userId')
    this.getNewList();
  },
  methods: {
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150;
    },
    /* 详情页面跳转*/
    newDetail(id){
      console.log("详情页面跳转>>",id)
      uni.navigateTo({
        url: `/myPackageA/pages/skiTubingInfo/skiTubingInfo?id=${id}`,
      })
    },
    /* 获取雪圈列表数据*/
    getNewList(){
      let params = {
        pageNum: 1,
        pageSize: 10,
        userId: this.userId
      }
      let _this = this
      wx.request({
        url: this.$httpApi.install.circleList,
        method: 'GET',
        data: params,
        success(res) {
          console.log(_this.$httpApi.install.circleList)
          _this.circleDataList = res.data.rows
          console.log("列表数据>>>",_this.circleDataList);
        },
      })
    },
    /* 回显封面图片*/
    getImage(titleImg){
      if ( titleImg && titleImg.includes(";") ){
        let imageList = titleImg.split(";");
        return imageList[0];
      }else {
        return titleImg
      }
    },
    /* 新增雪圈*/
    addNewCircleData() {
      uni.navigateTo({
        url: '/myPackageA/pages/skiTubingInfo/addNewSnowCircle',
      })
    },
    /* 修改雪圈*/
    editSnowCircle(circleId){
      console.log('circleId>>',typeof circleId, circleId);
      uni.navigateTo({
        url: `/myPackageA/pages/skiTubingInfo/addNewSnowCircle?id=${circleId}`,
      })
    },
    /* 删除雪圈*/
    deleteSnowCircle(circleId){
      let params = {
        circleId: circleId
      }
      console.log('circleId>>',typeof circleId, circleId);
      let _this = this;
      wx.showModal({
        title: '提示',
        content: '您确定要删除吗',
        success: (res) => {
          if (res.confirm) {
            uni.request({
              url: _this.$httpApi.install.deleteCircle,
              method: 'POST',
              data: params,
              success: (success) => {
                console.log('ok>>', success);
                if (success.data.code === 200) {
                  uni.showToast({icon: 'success', title: success.data.msg});
                  this.getNewList();
                }
              },
            });
          } else {
            //这里是点击了取消以后
            console.log('用户点击取消')
          }
        },
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.snowCircle-content {
  position: absolute;
  width: 100%;
  background-color: #f8fafe;
  /* padding: 0 30rpx; */
}

.masonry {
  width: 100%; // 默认宽度
  margin: 34px 0px;
  padding: 0 8px;
  columns: 2; // 默认列数
  column-gap: 10px; // 列间距
  background-color: #f8fafe;
  box-sizing: border-box;
  border-top-left-radius: 20rpx !important; /* 左上角 */
  border-top-right-radius: 20rpx !important; /* 右上角 */
}

.item {
  position: relative;
  width: 100%;
  break-inside: avoid;
  border-radius: 20rpx;
  margin-bottom: 10px;
  background-color: #fff;
  .itemClass{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 124rpx;
    height: 35rpx;
    border-radius: 0rpx 19rpx 0rpx 19rpx;
    opacity: 1;

    .itemClassIcon{
      width: 18rpx;
      margin-right: 10rpx;
    }
    .itemClassText{
      font-size: 22rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      line-height: 0rpx;
      color: #FFFFFF;
    }
  }
  /* 存草稿*/
  .itemClass-saveDraft{
    width: 124rpx;
    height: 35rpx;
    background: #504CD1;
    border-radius: 0rpx 19rpx 0rpx 19rpx;
    opacity: 1;
  }
  /* 未审核*/
  .itemClass-unaudited{
    width: 124rpx;
    height: 35rpx;
    background: #595959;
    border-radius: 0rpx 19rpx 0rpx 19rpx;
    opacity: 1;
  }
}

.imgCover{
  width: 100%;
  border-top-left-radius: 20rpx !important; /* 左上角 */
  border-top-right-radius: 20rpx !important; /* 右上角 */
}
//.item image {
//  width: 100%;
//  border-top-left-radius: 20rpx !important; /* 左上角 */
//  border-top-right-radius: 20rpx !important; /* 右上角 */
//}

.characters {
  margin-bottom: 20rpx;
  padding: 0 18rpx 20rpx 16rpx;
  border-bottom: 1rpx solid #DEE3E8;
}
.operation{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 18rpx 36rpx 18rpx;
  border-bottom-left-radius: 20rpx !important;
  border-bottom-right-radius: 20rpx !important;

  .operationIcon{
    width: 31rpx;
    height: 31rpx;

    .edit_Icon{
      width: 26rpx;
      height: 30rpx;
    }
    .delete_Icon{
      width: 31rpx;
      height: 31rpx;
    }

  }
}
.item text {
  padding: 8px 0;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #464646;
  line-height: 30rpx;
}

.isContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .flexContent{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    image{
      margin-right: 8rpx;
    }
    .userImg{
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background: #6E6E6E;
      opacity: 1;
    }
    .userName {
      font-size: 20rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #303030;
    }

    .clickIcon{
      width: 40rpx;
      height: 40rpx;
    }
    .userDate {
      font-size: 18rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #595959;
    }
  }

}

.addPlus {
  position: fixed;
  bottom: 190rpx;
  right: 10rpx;
  width: 116rpx;
  height: 116rpx;
  background: #303030;
  border-radius: 50%;
  opacity: 0.63;
  .addPlusImg {

    width: 50rpx;
    height: 50rpx;
    margin-left: 33rpx;
    margin-top: 33rpx;
  }
}
</style>
